<template>
    <div class="boxs">
        <el-card>
            <el-form :model="queryParams" ref="queryForm" :inline="true">

                <el-form-item label="时间范围">
                    <el-date-picker v-model="value1" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                        :start-placeholder="$t('table.start')" :end-placeholder="$t('table.end')"
                        :picker-options="pickerOptions" @change="timeChange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-refresh" size="small"
                        @click="resetQuery">{{ $t('table.reset') }}</el-button>
                </el-form-item>
            </el-form>
            <div class="flex_between">
                <div>{{ str }}成本消耗</div>
                 
            </div>
            <div class="police-count5" ref="chart5"></div>
            <div class="flex_between">
                <div>{{ str }}token消耗</div>
                 
            </div>
            <div class="police-count4" ref="chart4"></div>
            <div class="flex_between">
                <div>{{ str }}图片分析各接口token消耗对比</div>
            </div>
            <div class="police-count1" ref="chart1"></div>
         
        </el-card>
    </div>
</template>
<script>


import { getFaceTokens, getTokens } from "@/api/Calorie";
import pk from "@/utils/pk";
import * as XLSX from "xlsx";
export default {
    name: "subscription",
    data() {
        return {
            languageContent: '',
            goalLanguage: "zh_CN",
            languageList: [],
            translateLoading: false,
            pkList: [],

            queryParams: {
                dateRange: {
                    start: '',
                    end: ''
                },
            },
            total: 0,
            loading: false,
            addLoading: false,
            moreArr: [],
            dialogVisible: false,
            form: {
                comment_type: "",
            },
            search: "",
            rules: {
                comment_type: [
                    { required: true, message: "请输入类型", trigger: "blur" },
                ],
            },
            value1: "",
            chartContainer1: null,
            option1: {},
            chartData: [],
            chartContainer2: null,
            option2: {},
            chartData2: [],
            chartContainer3: null,
            option3: {},
            chartData3: [],
            chartContainer4: null,
            option4: {},
            chartData4: [],
            chartContainer5: null,
            option5: {},
            chartData5: [],
            isLoading1: true,
            chart1: null,
            chart2: null,
            chart3: null,
            chart4: null,
            chart5: null,

            loadingOption: {
                text: '',
                color: '#409eff',
                maskColor: 'rgba(255, 255, 255, 0.8)',
                zlevel: 0
            },
            pk: '',
            pickerOptions: {

            },
            invalidDateRange: false,
            str: '近30天',
            conversionRateMean: 0

        };
    },
    created() {

    },

    mounted() {
        this.pickerOptions = {
            onPick: ({ maxDate, minDate }) => {
                if (minDate && maxDate) {
                    // 验证选择的日期范围
                    const oneMonthLater = new Date(minDate);
                    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);

                    if (maxDate > oneMonthLater) {
                        // 如果超过一月范围
                        this.$nextTick(() => {
                            alert('选择的日期范围不能超过一个月');
                            this.value1 = []
                            // 立即重置 maxDate 以取消选择
                            this.invalidDateRange = true; // 设置标志位为 true
                        });
                    } else {
                        this.invalidDateRange = false; // 设置标志位为 false
                    }
                }
            }
        };
        const { pk } = this.$route.query;
        this.queryParams.pk = pk
        this.pk = pk
        this.getStatistics();
        // this.getStatistics2();
        // this.getStatistics3();
        this.getStatistics4();

    },
    methods: {

        formatDate(date) {
            const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
            return new Date(date).toLocaleDateString('zh-CN', options);
        },
        async getStatistics() {
            if (!this.queryParams.dateRange.start) {
                // 初始化默认日期区间（近一个月）
                const now = new Date();
                const today = now.toISOString().split('T')[0];
                const prevMonthDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
                const startDate = prevMonthDate.toISOString().split('T')[0];

                this.queryParams = {
                    dateRange: {
                        start: startDate,
                        end: today,
                    },
                };
            }

            // type 参数视需求修改（如'face'已不适用则可移除）
            let query = {
                dateRange: this.queryParams.dateRange,
                // type: 'face' // 这里不用 type，如果要查所有type数据，后端接口返回全类型数据
            };

            this.chart1 = this.$echarts.init(this.$refs.chart1);
            this.chart1.showLoading();

            // 假设 getFaceTokens 返回格式：
            // [{date: '05-01', type:'exercise', total_tokens:1234, ...}, {...}]
            let { data } = await getFaceTokens(query);
            this.chartData = data;

            // 类型换成你当前要统计的业务type
            function aggregateData(rawData) {
                const summary = {};
                rawData.forEach(entry => {
                    const { date, type, total_tokens } = entry;
                    // 核心：改成实际type
                    if (!summary[date]) {
                        summary[date] = { exercise: 0, food_text: 0, food_scan: 0 };
                    }
                    if (summary[date][type] !== undefined) {
                        summary[date][type] += total_tokens;
                    }
                });
                return summary;
            }

            const aggregatedData = aggregateData(data);

            const dates = Object.keys(aggregatedData);
            const exerciseData = dates.map(date => aggregatedData[date].exercise);
            const foodTextData = dates.map(date => aggregatedData[date].food_text);
            const foodScanData = dates.map(date => aggregatedData[date].food_scan);

            this.option1 = {
                color: ['#3489FF', '#FF6347', '#32CD32'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    data: ['运动', '食物文本', '食物扫码'], // 改成中文可读名
                    bottom: '0'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: dates,
                    axisLine: {
                        lineStyle: { color: '#999' }
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999',
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: { color: '#999' }
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999',
                    },
                    splitLine: {
                        lineStyle: { color: '#ddd' }
                    }
                }],
                series: [
                    {
                        name: '运动',           // exercise
                        type: 'bar',
                        data: exerciseData,
                        emphasis: { focus: 'series' }
                    },
                    {
                        name: '食物文本',       // food_text
                        type: 'bar',
                        data: foodTextData,
                        emphasis: { focus: 'series' }
                    },
                    {
                        name: '食物扫码',      // food_scan
                        type: 'bar',
                        data: foodScanData,
                        emphasis: { focus: 'series' }
                    }
                ]
            };

            setTimeout(() => {
                this.initChart1();
                this.chart1.hideLoading();
            });
        },

        async getStatistics2() {

            if (!this.queryParams.dateRange.start) {
                // 获取当前时间
                const now = new Date();

                // 获取今天的日期：格式为 YYYY-MM-DD
                const today = now.toISOString().split('T')[0];

                // 获取上一个月的日期
                const prevMonthDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
                const startDate = prevMonthDate.toISOString().split('T')[0]; // 开始日期
                // 赋值日期
                this.queryParams = {
                    dateRange: {
                        start: startDate,  // 得到的开始日期
                        end: today,        // 结束日期即今天
                    },
                };

            }
            let query = {
                dateRange: this.queryParams.dateRange,
                type: 'makeup'
            }

            this.chart2 = this.$echarts.init(this.$refs.chart2);
            // 显示加载动画
            this.chart2.showLoading(this.loadingOption);
            let { data } = await getFaceTokens(query);
            this.chartData = data;

            // 提取日期和计数数据
            const dates = data.map(item => item.date);
            const counts = data.map(item => item.total_tokens);
            const prompt_tokens = data.map(item => item.prompt_tokens);
            const completion_tokens = data.map(item => item.completion_tokens);
            this.option2 = {
                color: ['#3489FF'],
                grid: {
                    left: '5.5%',
                    right: '0%'
                },
                xAxis: [{
                    type: 'category',
                    data: dates, // 设置 x 轴数据
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999999',
                        margin: 13
                    },
                    splitLine: {
                        lineStyle: {
                            show: true,
                            color: '#DDDDDD'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999999',
                        margin: 13
                    },
                    splitLine: {
                        lineStyle: {
                            show: true,
                            color: '#DDDDDD'
                        }
                    }
                }],
                series: [{
                    data: counts, // 设置 y 轴数据
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#94cdfc' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#F4F7FF' // 100% 处的颜色
                            }]
                            // global: false // 缺省为 false
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                    }
                }],
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    },
                    formatter: function (params) {
                        const index = params[0].dataIndex;
                        return `
                                日期: ${dates[index]}<br/>
                                发-消耗: ${prompt_tokens[index]}<br/>
                                收-消耗: ${completion_tokens[index]}<br/>
                                总消耗: ${counts[index]}
                            `;
                    }
                },
                dataZoom: {
                    type: 'inside'
                }
            };
            setTimeout(() => {
                this.initChart2();
                this.chart2.hideLoading();

            })
        },
        async getStatistics3() {

            if (!this.queryParams.dateRange.start) {
                // 获取当前时间
                const now = new Date();

                // 获取今天的日期：格式为 YYYY-MM-DD
                const today = now.toISOString().split('T')[0];

                // 获取上一个月的日期
                const prevMonthDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
                const startDate = prevMonthDate.toISOString().split('T')[0]; // 开始日期
                // 赋值日期
                this.queryParams = {
                    dateRange: {
                        start: startDate,  // 得到的开始日期
                        end: today,        // 结束日期即今天
                    }
                };

            }
            let query = {
                dateRange: this.queryParams.dateRange,
                type: 'product'
            }

            this.chart3 = this.$echarts.init(this.$refs.chart3);
            // 显示加载动画
            this.chart3.showLoading(this.loadingOption);
            let { data } = await getFaceTokens(query);
            this.chartData = data;

            // 提取日期和计数数据
            const dates = data.map(item => item.date);
            const counts = data.map(item => item.total_tokens);
            const prompt_tokens = data.map(item => item.prompt_tokens);
            const completion_tokens = data.map(item => item.completion_tokens);

            this.option3 = {
                color: ['#3489FF'],
                grid: {
                    left: '5.5%',
                    right: '0%'
                },
                xAxis: [{
                    type: 'category',
                    data: dates, // 设置 x 轴数据
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999999',
                        margin: 13
                    },
                    splitLine: {
                        lineStyle: {
                            show: true,
                            color: '#DDDDDD'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999999',
                        margin: 13
                    },
                    splitLine: {
                        lineStyle: {
                            show: true,
                            color: '#DDDDDD'
                        }
                    }
                }],
                series: [{
                    data: counts, // 设置 y 轴数据
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#94cdfc' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#F4F7FF' // 100% 处的颜色
                            }]
                            // global: false // 缺省为 false
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                    }
                }],
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    },
                    formatter: function (params) {
                        const index = params[0].dataIndex;
                        return `
                                日期: ${dates[index]}<br/>
                                发-消耗: ${prompt_tokens[index]}<br/>
                                收-消耗: ${completion_tokens[index]}<br/>
                                总消耗: ${counts[index]}
                            `;
                    }
                },
                dataZoom: {
                    type: 'inside'
                }
            };
            setTimeout(() => {
                this.initChart3();
                this.chart3.hideLoading();

            })
        },
        async getStatistics4() {
            if (!this.queryParams.dateRange.start) {
                // 获取当前时间
                const now = new Date();

                // 获取今天的日期：格式为 YYYY-MM-DD
                const today = now.toISOString().split('T')[0];

                // 获取上一个月的日期
                const prevMonthDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
                const startDate = prevMonthDate.toISOString().split('T')[0]; // 开始日期
                // 赋值日期
                this.queryParams = {
                    dateRange: {
                        start: startDate,  // 得到的开始日期
                        end: today,        // 结束日期即今天
                    },

                };

            }
            let query = {
                dateRange: this.queryParams.dateRange,
            }

            this.chart4 = this.$echarts.init(this.$refs.chart4);
            // 显示加载动画
            this.chart4.showLoading(this.loadingOption);
            this.chart5 = this.$echarts.init(this.$refs.chart5);
            // 显示加载动画
            this.chart5.showLoading(this.loadingOption);
            // console.log(this.queryParams)
            let { data } = await getTokens(query);
            this.chartData = data;

            // 提取日期和计数数据
            const dates = data.map(item => item.date);
            const counts = data.map(item => item.total_tokens);
            const prompt_tokens = data.map(item => item.prompt_tokens);
            const completion_tokens = data.map(item => item.completion_tokens);
            const total_dollar = data.map(item => item.total_dollar);
            const prompt_dollar = data.map(item => item.prompt_dollar);
            const completion_dollar = data.map(item => item.completion_dollar);
            this.option4 = {
                color: ['#3489FF'],
                grid: {
                    left: '5.5%',
                    right: '0%'
                },
                xAxis: [{
                    type: 'category',
                    data: dates, // 设置 x 轴数据
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999999',
                        margin: 13
                    },
                    splitLine: {
                        lineStyle: {
                            show: true,
                            color: '#DDDDDD'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999999',
                        margin: 13
                    },
                    splitLine: {
                        lineStyle: {
                            show: true,
                            color: '#DDDDDD'
                        }
                    }
                }],
                series: [{
                    data: counts, // 设置 y 轴数据
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#94cdfc' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#F4F7FF' // 100% 处的颜色
                            }]
                            // global: false // 缺省为 false
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                    }
                }],
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    },
                    formatter: function (params) {
                        const index = params[0].dataIndex;
                        return `
                                日期: ${dates[index]}<br/>
                                发-消耗: ${prompt_tokens[index]}<br/>
                                收-消耗: ${completion_tokens[index]}<br/>
                                总消耗: ${counts[index]}
                            `;
                    }
                },
                dataZoom: {
                    type: 'inside'
                }
            };
            this.option5 = {
                color: ['#3489FF'],
                grid: {
                    left: '5.5%',
                    right: '0%'
                },
                xAxis: [{
                    type: 'category',
                    data: dates, // 设置 x 轴数据
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999999',
                        margin: 13
                    },
                    splitLine: {
                        lineStyle: {
                            show: true,
                            color: '#DDDDDD'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 13,
                        color: '#999999',
                        margin: 13
                    },
                    splitLine: {
                        lineStyle: {
                            show: true,
                            color: '#DDDDDD'
                        }
                    }
                }],
                series: [{
                    data: total_dollar, // 设置 y 轴数据
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#94cdfc' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#F4F7FF' // 100% 处的颜色
                            }]
                            // global: false // 缺省为 false
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                    }
                }],
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    },
                    formatter: function (params) {
                        const index = params[0].dataIndex;
                        return `
                                日期: ${dates[index]}<br/>
                                发-消耗: ≈$${prompt_dollar[index]}<br/>
                                收-消耗: ≈$${completion_dollar[index]}<br/>
                                总消耗: ≈$${total_dollar[index]}
                            `;
                    }
                },
                dataZoom: {
                    type: 'inside'
                }
            };
            setTimeout(() => {
                this.initChart4();
                this.chart4.hideLoading();
                this.initChart5();
                this.chart5.hideLoading();
            })
        },

        timeChange() {
            if (this.invalidDateRange) return; // 如果标志位为 true，则退出
            this.queryParams.dateRange.start = this.value1[0];
            this.queryParams.dateRange.end = this.value1[1];
            this.str = this.value1[0] + '-' + this.value1[1]

            this.getStatistics();
            this.getStatistics2();
            this.getStatistics3();
            this.getStatistics4();

        },
        getKeyByValue(object, value) {
            return Object.keys(object).find((key) => object[key] === value);
        },

        resetQuery() {
            this.queryParams.state = null;
            this.queryParams.package_name = null;
            this.queryParams.dateRange.start = null;
            this.queryParams.dateRange.end = null;
            this.queryParams.page = 1;
            this.value1 = "";
            this.str = '近30天'

            this.getStatistics();
            this.getStatistics2();
            this.getStatistics3();
            this.getStatistics4();

        },
        async handleExport() {
            this.loading = true;
            let { data } = await calculateDailySuccessfulPayments(this.queryParams);

            const headers = {
                date: '日期',
                count: '续订人数'
            };
            const transformedData = data.map(item => {
                const newItem = {};
                for (const key in item) {
                    if (headers[key]) {
                        newItem[headers[key]] = item[key];
                    } else {
                        newItem[key] = item[key];
                    }
                }
                return newItem;
            });


            const ws = XLSX.utils.json_to_sheet(transformedData); // 将JSON转换成sheet
            const wb = XLSX.utils.book_new(); // 新建workbook
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 在workbook中添加新的sheet
            XLSX.writeFile(wb, "MySpreadsheet.xlsx"); // 写文件并触发下载
        },
        async handleExport2() {
            this.loading = true;
            let { data } = await calculateDailySuccessfulRefunds(this.queryParams);

            const headers = {
                date: '日期',
                count: '退款人数'
            };
            const transformedData = data.map(item => {
                const newItem = {};
                for (const key in item) {
                    if (headers[key]) {
                        newItem[headers[key]] = item[key];
                    } else {
                        newItem[key] = item[key];
                    }
                }
                return newItem;
            });


            const ws = XLSX.utils.json_to_sheet(transformedData); // 将JSON转换成sheet
            const wb = XLSX.utils.book_new(); // 新建workbook
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 在workbook中添加新的sheet
            XLSX.writeFile(wb, "MySpreadsheet.xlsx"); // 写文件并触发下载
        },
        async handleExport3() {
            this.loading = true;
            let { data } = await calculateConversionRate(this.queryParams);

            const headers = {
                date: '日期',
                initialCount: '试用',
                renewalCount: '续费人数',
                conversionRate: '转正率',
            };
            const transformedData = data.map(item => {
                const newItem = {};
                for (const key in item) {
                    if (headers[key]) {
                        newItem[headers[key]] = item[key];
                    } else {
                        newItem[key] = item[key];
                    }
                }
                return newItem;
            });


            const ws = XLSX.utils.json_to_sheet(transformedData); // 将JSON转换成sheet
            const wb = XLSX.utils.book_new(); // 新建workbook
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 在workbook中添加新的sheet
            XLSX.writeFile(wb, "MySpreadsheet.xlsx"); // 写文件并触发下载
        },
        async handleExport4() {
            this.loading = true;
            let { data } = await calculateDailyDirectPurchases(this.queryParams);

            const headers = {
                date: '日期',
                count: '直接购买人数',
            };
            const transformedData = data.map(item => {
                const newItem = {};
                for (const key in item) {
                    if (headers[key]) {
                        newItem[headers[key]] = item[key];
                    } else {
                        newItem[key] = item[key];
                    }
                }
                return newItem;
            });


            const ws = XLSX.utils.json_to_sheet(transformedData); // 将JSON转换成sheet
            const wb = XLSX.utils.book_new(); // 新建workbook
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 在workbook中添加新的sheet
            XLSX.writeFile(wb, "MySpreadsheet.xlsx"); // 写文件并触发下载
        },

        initChart1() {
            this.chartContainer1 = this.$echarts.init(document.querySelector('.police-count1'))
            this.chartContainer1.setOption(this.option1)
        },
        initChart2() {
            this.chartContainer2 = this.$echarts.init(document.querySelector('.police-count2'))
            this.chartContainer2.setOption(this.option2)
        },
        initChart3() {
            this.chartContainer3 = this.$echarts.init(document.querySelector('.police-count3'))
            this.chartContainer3.setOption(this.option3)
        },
        initChart4() {
            this.chartContainer4 = this.$echarts.init(document.querySelector('.police-count4'))
            this.chartContainer4.setOption(this.option4)
        },
        initChart5() {
            this.chartContainer5 = this.$echarts.init(document.querySelector('.police-count5'))
            this.chartContainer5.setOption(this.option5)
        },
    },
};
</script>
<style lang="scss" scoped>
.boxs {
    padding: 20px;
}

::v-deep.el-input.is-disabled .el-input__inner {
    color: #333 !important;
}

::v-deep.el-textarea.is-disabled .el-textarea__inner {
    color: #333 !important;
}

::v-deep .el-image {
    margin-right: 8px;
    border-radius: 4px;
}

.statistics-container {
    display: flex;
    flex-wrap: wrap;
    /* 自动换行 */
    gap: 10px;
    /* 数据块之间的间距 */
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    font-size: 14px;
}

.item {
    background-color: #f9f9f9;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-block;
    /* 使得每个元素成为一块 */
    white-space: nowrap;
    /* 防止单个元素中的文本换行 */
}

.police-count1,
.police-count2,
.police-count3,
.police-count4,
.police-count5,
.police-count6,
.police-count7,
.police-count8 {
    width: 100%;
    min-width: 1000px;
    height: 350px;
    color: #000;
}


.loading .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg) !important;
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>